<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/varieties.css">
    <style>
        .swiper-slide {
            width: 100%;
            height: 375px;
        }

        .swiper-slide img {
            width: 100%;
            height: 375px;
            /* border-radius: 0.05rem; */
        }

        .swiper-slide video {
            width: 3.5rem;
            height: 3.5rem;
            /* border-radius: 0.05rem;
            background: #000; */
        }

        .varieties-swiper .swiper-pagination .swiper-pagination-bullet-active {
            background: #fff;
            width: 11px;
            height: 3px;
            border-radius: 1.5px;
        }

        .varieties-swiper .swiper-pagination-bullet {
            width: 3px;
            height: 3px;
            background: #fff;
            opacity: 0.4;
            margin: 0 1.5px;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak @click="closeHeadFrame">
        <div class="windHeight">
            <div class="header-common f7-header">
                <div class="flex-x-s header ">
                    <span class="iconfont goback" @click="back">&#xe66f;</span>
                    <div class="title">
                        {{detailOtherData.title}}
                    </div>
                    <div class="flex-x-s" style="position: relative;">
                        <div class="circle-header-btns" @click="showPopBox=!showPopBox">
                            <span v-for="item in 3" :key="item"></span>
                        </div>
                        <div class="circle-handle-select-box" v-show="showPopBox">
                            <div class="circle-handle-select-item" @click="showDialog(2)">
                                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/deformed/head_share.png" />
                                分享
                            </div>
                            <div class="circle-handle-select-item" @click="showDialog(1)">
                                <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/deformed/head_report.png" />
                                举报
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="varieties-detail">
                <!-- 轮播 -->
                <div class="varieties-swiper">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <template v-for="(item,index) in detailOtherData.banners">
                                <div v-if="item.type == 0" class="swiper-slide flex-x-c"
                                    @click="preview(index,detailOtherData.banners)" :key="index">
                                    <img :src="item.imageUrl" alt="">
                                </div>
                                <div v-else class="swiper-slide flex-x-c" :key="index">
                                    <div class="videoPlay main-img">
                                        <video :id="'player'+index" controls preload="none" webkit-playsinline="true"
                                            playsinline="true" :poster="item.imageUrl" x5-playsinline>
                                            <source :src="item.videoId" type="video/mp4" />
                                        </video>
                                    </div>
                                </div>

                            </template>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="detail-container">
                    <!-- 详情介绍 -->
                    <div class="varieties-detail-rent">
                        <div class="rent-name">{{detailOtherData.title}}</div>
                        <div class="varieties-detail-subtitle">
                            {{handleTimeYMD(detailOtherData.publishTime)}}发布 | {{detailOtherData.hitNum}}浏览
                            <span
                                :class="detailOtherData.type == 0 ?'varieties-detail-subtitle-tag-sale':'varieties-detail-subtitle-tag'">{{detailOtherData.type
                                == 0 ? '出售' :
                                '出租'}}</span>
                        </div>
                    </div>
                    <div class="varieties-detail-main">
                        <div class="varieties-production-params">
                            <div class="varieties-param">
                                <div class="varieties-param-items">
                                    <div class="varieties-param-item varieties-param-key">分类:</div>
                                    <div class="varieties-param-item varieties-param-value">
                                        {{detailOtherData.className}}
                                    </div>
                                </div>
                                <div class="varieties-param-items">
                                    <div class="varieties-param-item varieties-param-key">规格:</div>
                                    <div class="varieties-param-item varieties-param-value">
                                        {{detailOtherData.model}}
                                    </div>
                                </div>
                            </div>
                            <div class="varieties-param">
                                <div class="varieties-param-items">
                                    <div class="varieties-param-item varieties-param-key">数量:</div>
                                    <div class="varieties-param-item varieties-param-value">
                                        {{detailOtherData.num}} {{detailOtherData.unit|filterUnit}}
                                    </div>
                                </div>
                                <div class="varieties-param-items">
                                    <div class="varieties-param-item varieties-param-key">价格:</div>
                                    <div class="varieties-param-item varieties-param-value">
                                        {{detailOtherData.price}}
                                    </div>
                                </div>
                            </div>
                            <div class="varieties-param">
                                <div class="varieties-param-items">
                                    <div class="varieties-param-item varieties-param-key">地区:</div>
                                    <div class="varieties-param-item varieties-param-value">
                                        {{detailOtherData.privinceName}}{{detailOtherData.cityName}}{{detailOtherData.areaName}}
                                    </div>
                                </div>
                            </div>
                            <div class="varieties-param">
                                <div class="varieties-param-items">
                                    <div class="varieties-param-item varieties-param-key">地址:</div>
                                    <div class="varieties-param-item varieties-param-value">
                                        {{detailOtherData.address}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="varieties-box-line"></div>
                        <div class="varieties-desc-box">
                            <div class="varieties-desc-title">产品详情</div>
                            <div class="varieties-desc-content">{{detailOtherData.description ?
                                detailOtherData.description:'暂无任何描述哦~'}}</div>
                        </div>
                        <div class="varieties-box-line"></div>
                    </div>
                    <div class="varieties-about-recommend">
                        <div class="varieties-desc-title">相关推荐</div>
                        <div class="varieties-recommend-container">
                            <div @click="gotoDetail(item)" class="varieties-recommend-item"
                                v-for="(item,index) in listRecommends" :key="index">
                                <div class="varieties-img-box">
                                    <img :src="item.imageUrl?item.imageUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/item_img.png'" alt=""
                                        class="varieties-preview-img">
                                    <div class="varieties-img-btn" :class="[item.type == 0 ? 'blueBac' : 'orangeBac']">
                                        {{item.type === 0 ? '出售' : '出租'}}</div>
                                </div>
                                <div class="varieties-recommend-center">
                                    <p class="varieties-recommend-name">{{item.title}}</p>
                                    <div class="varieties-recommend-info">
                                        <div class="varieties-info-item">规格: {{item.model}}</div>
                                    </div>
                                    <div class="varieties-recommend-other">
                                        <div class="varieties-other-tag">{{item.typeName }}</div>
                                        <div class="varieties-other-distance">{{item.countDistance}}</div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="varieties-nomore">-  没有更多了 -</div> -->
                        </div>
                    </div>
                </div>
            </div>
            <van-goods-action class="foot iphonex-padding-bottom">
                <van-goods-action-icon color="#408CEC" icon="shop-o" text="店铺" @click="sendEvent('goStore')">
                </van-goods-action-icon>
                <van-goods-action-icon :color="isCollect?'#F53B31':'#408CEC'" :icon="isCollect?'star':'star-o'"
                    text="收藏" @click="doCollect"></van-goods-action-icon>
                <van-goods-action-icon color="#408CEC" icon="service-o" text="客服" @click="sendEvent('goIM')">
                </van-goods-action-icon>
                <div class="foot-btn" style="width: 2.2rem;">

                    <van-button class="foot-call" round type="info" @click="sendEvent('call')">立即联系</van-button>
                    <!--v-if="!onlineBuy && detailOtherData.inquiried" <van-button round color="#FF8D23" style="width:1.2rem;margin-right: .08rem;font-size: .14rem;" type="info" v-if="onlineBuy" @click="sendEvent('addCart')">加入购物车</van-button>
                    <van-button round type="info" style="width:1rem;font-size: .14rem;"  v-if="onlineBuy" @click="sendEvent('purchase')">立即购买</van-button> -->
                </div>
            </van-goods-action>
        </div>
    </div>
    <script src="../../script/api.js "></script>
    <script src="../../script/flexible.js "></script>
    <script src="../../script/fastclick.js "></script>
    <script src="../../script/vue.min.js "></script>
    <script src="../../script/iconfont.js "></script>
    <script src="../../script/swiper.min.js"></script>
    <script src="../../script/vant.min.js "></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/vue-lazyload.js"></script>
    <script>
        apiready = function () {
            imgLazyLoad();
            var photoBrowser = api.require('photoBrowser');
            var vm = new Vue({
                el: '.app',
                data: {
                    showPopBox: false,
                    onlineBuy: false,
                    isCollect: false,
                    headH: 0,
                    footH: 0,
                    module: 'STEEL', // 所属模块 用于收藏/浏览量
                    detailOtherData: {
                        id: 1,
                        userId: '',
                        inquiried: false, // 是否可询价
                        contactTels: '', // 联系电话
                        classId: '', // 用于相关推荐传的参数
                        banners: [],
                        title: '', // 标题
                        publishTime: '', // 发布日期
                        hitNum: '', // 浏览量
                        type: 0, // 0: 售卖 1： 出租 
                        className: '', // 分类
                        model: '', // 规格
                        num: '', // 数量
                        price: '', // 价格
                        addressName: '', // 地区
                        address: '', // 地址
                        description: '', // 产品详情
                    },
                    refreshTimes: 0,
                    listRecommends: [],
                    swipeDuration: 3000,
                    preIndex: 0
                },
                filters: {
                    // 单位（0根 1吨 2台）
                    filterUnit(val) {
                        switch (val) {
                            case 0:
                                return "根"
                            case 1:
                                return "吨"
                            case 2:
                                return "台"
                            default:
                                return ""
                        }
                    }
                },
                mounted: function () {
                    var systemSet = $api.getStorage('systemSet')
                    this.onlineBuy = systemSet ? systemSet.onlineBuyEnabled : false

                   // const location = $api.getStorage('location_home') || {}
                    const myLocation = api.getPrefs({
                            sync: true,
                            key: 'location_home'
                        }) || {}
                    this.location = JSON.parse(myLocation).location;

                    this.getProductDetail(api.pageParam.id)
                },
                methods: {
                    // 获取商品详情
                    getProductDetail: function (id) {
                        let vm = this
                        index.deformedSteel("getDeformedDetail")(id, function (ret) {
                            vm.detailOtherData = ret.data
                            console.log(JSON.stringify(vm.detailOtherData))
                            checkHasCollect(vm.module, id, vm) // 收藏
                            addBrowse(vm.module, id) // 浏览
                            vm.$nextTick(() => {
                                vm.initSwipe()
                            })
                            vm.getRecommendsData() // 相关推荐初始化
                        })
                    },

                    // 初始化相关推荐
                    getRecommendsData: function (status) {
                        let vm = this
                        const location = vm.location.split(',')
                        const lon = location[0]
                        const lat = location[1]
                        const param = {
                            classIds: [vm.detailOtherData.classId],
                            pageNum: 1,
                            pageSize: 5,
                            status: 1, // 0:下架  1： 上架
                            notIds: [api.pageParam.id]
                        }
                        index.deformedSteel("getListDeformed")(param, function (ret) {
                            // 计算距离
                            ret.data.list.map(item => {
                                let countDistance = getDistance(lat, lon, item.location
                                    .lat, item.location.lon)
                                countDistance = (Number(countDistance) / 1000).toFixed(
                                    0)
                                item.countDistance = countDistance > 500 ? '500km 以上' :
                                    countDistance + 'km'
                            })
                            vm.listRecommends = ret.data.list
                        })
                    },

                    // 收藏
                    doCollect() {
                        handleCollect(vm.module, vm.detailOtherData.id, vm)
                    },

                    // 初始化轮播
                    initSwipe() {
                        var mySwiper = new Swiper('.swiper-container', {
                            pagination: '.swiper-pagination',
                            // autoplay: 3000,
                            onSliderMove: function (swiper, event) {
                                var curDom = document.querySelector('#player' + swiper.activeIndex)
                                if (curDom) curDom.pause()
                            }
                        })
                    },

                    // 图片预览
                    preview(index, medias) {
                        previewPhoto(index, medias, photoBrowser)
                    },

                    // 返回上一级
                    back() {
                        api.closeWin();
                    },

                    // 显示分享/举报弹框
                    showDialog(type) {
                        if (!checkToken()) return false;
                        if (this.detailOtherData.title) {
                            /*
                                * 参数 1: module: 分享所属模块, 主要用于在report_alert_frm.html中配置分享路径
                                * 参数 2: id: 分享是用id决定是哪个详情页
                                * 参数 3: type: 1是举报, 2是分享
                                * 参数 4: description:  分享标题/描述
                            */
                            toReportOrShareDialog(vm.module, vm.detailOtherData.id, type, vm.detailOtherData.title)
                        }
                    },

                    // 底部按钮监听
                    sendEvent(type) {
                        if (!checkToken()) return false;
                        switch (type) {
                            case 'goStore': // 店铺
                                vm.goStore()
                                break
                            case 'call': // 立即联系
                                vm.call()
                                break
                            case 'goIM': // 客服
                                gIMCommon(vm.detailOtherData.userId)
                                break
                            case 'addCart': // 加入购物车
                                vm.addCart()
                                break
                            case 'purchase': // 立即购买
                                vm.purchase()
                                break
                        }
                    },

                    // 加入购物车
                    addCart() {
                        cart("addCart")({
                            productId: this.detailOtherData.id,
                            quantity: 1
                        }, function (ret) {
                            toastMiddle("加入购物车成功")
                            api.sendEvent({ name: 'refreshCart' })
                        })
                    },

                    // 立即联系
                    call() {
                        var vm = this
                        var phone = this.detailOtherData.contactTels.split(',')
                        api.actionSheet({
                            cancelTitle: '取消',
                            buttons: phone
                        }, function (ret, err) {
                            if (ret.buttonIndex > phone.length) return false;
                            index.product("addInquiry")(vm.detailOtherData.id, function (ret) { })
                            api.call({
                                type: 'call_type',
                                number: phone[ret.buttonIndex - 1]
                            });
                        });
                    },

                    // 店铺
                    goStore() {
                        api.openWin({
                            name: 'my_store_index',
                            url: '../my_store/my_store_index.html',
                            bounces: false,
                            pageParam: {
                                id: this.detailOtherData.userId,
                                queryOwn: api.pageParam.queryOwn
                            }
                        });
                    },

                    // 立即购买
                    purchase() {
                        var shops = [{
                            products: [{
                                id: this.detailOtherData.id,
                                quantity: 1,
                            }],
                            shopId: this.detailOtherData.shopId
                        },]
                        api.openWin({
                            name: 'create_order_win',
                            url: '../store/create_order_win.html',
                            bounces: false,
                            pageParam: {
                                shops: shops
                            }
                        });
                    },

                    // 相关推荐查看详情
                    gotoDetail(item) {
                        api.openWin({
                            name: "deformed_detail_win",
                            url: "deformed_detail_win.html",
                            bounces: false,
                            reload: true,
                            pageParam: {
                                id: item.id
                            }
                        })
                    },

                    // 关闭头部弹框
                    closeHeadFrame(e) {
                        // 点击空白处关闭右上角弹框
                        if (e.target._prevClass !== 'circle-handle-select-box' && e.target._prevClass !== 'circle-header-btns') {
                            this.showPopBox = false
                        }
                    }
                },
            })
        }
    </script>
</body>

</html>